<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="hierarchical_data_source">
        <title>Overview | Kendo UI Hierarchical Data Source</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to represent hierarchical data using the Kendo UI HierarchicalDataSource component, an extension of Kendo UI DataSource.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("framework/hierarchicaldatasource/overview.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//framework/hierarchicaldatasource/overview.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="hierarchicaldatasource-overview"><a href="#hierarchicaldatasource-overview">HierarchicalDataSource Overview</a></h1>

<p>The <a href="/api/javascript/data/hierarchicaldatasource">Kendo UI HierarchicalDataSource component</a> extends the <a href="/api/javascript/data/datasource">DataSource component</a>, allowing the representation of hierarchical data. This article assumes that you are familiar with the Kendo UI DataSource, and builds upon that knowledge with specific information about hierarchical data.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<h3 id="bind-hierarchicaldatasource-to-local-data"><a href="#bind-hierarchicaldatasource-to-local-data">Bind HierarchicalDataSource to Local Data</a></h3>

<h4>Create the HierarchicalDataSource and bind to local data</h4>

<p>The example below demonstrates how to create a <code>HierarchicalDataSource</code> component bound to local data.</p>

<h6>Example</h6>

<pre><code>var categorizedMovies = [ {
      categoryName: "SciFi",
      items: [
        { title: "Star Wars: A New Hope", year: 1977 },
        { title: "Star Wars: The Empire Strikes Back", year: 1980 },
        { title: "Star Wars: Return of the Jedi", year: 1983 }
      ]
  }, {
      categoryName: "Drama",
      items: [
        { title: "The Shawshenk Redemption", year: 1994 },
        { title: "Fight Club", year: 1999 },
        { title: "The Usual Suspects", year: 1995 }
      ]
  }
];

var localDataSource = new kendo.data.HierarchicalDataSource({ data: categorizedMovies });
</code></pre>

<h4>Create the HierarchicalDataSource and bind to heterogeneous local data</h4>

<p>The example below demonstrates how to create a <code>HierarchicalDataSource</code> component and bind it to heterogeneous local data by configuring it to bind the children when the fields holding the children items have different names.</p>

<h6>Example</h6>

<pre><code>  var data = [{
    CategoryName: "Category 1",
    Products: [{
      ProductName: "Product 1",
      Suppliers: [{
        SupplierName: "Supplier 1"
      }]
    }]
  }];

  var Suppliers = {
    schema: {
      data: "Suppliers"
    }
  };

  var Products = {
    schema: {
      data: "Products",
      model: {
        children: Suppliers
      }
    }
  };

  var categoriesDataSource = new kendo.data.HierarchicalDataSource({
    data: data,
    schema: {
      model: {
        children: Products
      }
    }
  });
</code></pre>

<h3 id="bind-hierarchicaldatasource-to-remote-service"><a href="#bind-hierarchicaldatasource-to-remote-service">Bind HierarchicalDataSource to Remote Service</a></h3>

<h4>Create the HierarchicalDataSource and bind to homogeneous remote service</h4>

<p>The example below demonstrates how to create a <code>HierarchicalDataSource</code> component that is bound to a homogeneous remote data service.</p>

<h6>Example</h6>

<pre><code>var homogeneous = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Employees",
            dataType: "json"
        }
    },
    schema: {
        model: {
            id: "EmployeeId",
            hasChildren: "HasEmployees"
        }
    }
});
</code></pre>

<p>The snippet above targets the HierarchicalDataSource to a single service end-point. The data service is homogeneous, i.e. it always returns objects of the same type. After executing <code>homogeneous.read()</code>, the service end-point is hit without an <code>EmployeeId</code> parameter,m as demonstrated below.</p>

<h6>Example</h6>

<pre><code>GET https://demos.telerik.com/kendo-ui/service/Employees

=&gt; [ { "EmployeeId": 2, "Name": "Andrew", "HasEmployees": true } ]
</code></pre>

<p>Reading the children of the returned item is achieved by calling the <a href="/api/framework/node#load"><code>load</code> method</a> of the data item.</p>

<h6>Example</h6>

<pre><code>var ceo = homogeneous.view()[0];

ceo.load();
</code></pre>

<p>This hits the service end-point and supplies the id of the data item.</p>

<h6>Example</h6>

<pre><code>GET https://demos.telerik.com/kendo-ui/service/Employees?EmployeeId=2

=&gt; [
      { "EmployeeId": 3, "Name": "Bob", "HasEmployees": false },
      { "EmployeeId": 4, "Name": "Charlie", "HasEmployees": false }
   ]
</code></pre>

<p>Now, the children can be accessed.</p>

<h6>Example</h6>

<pre><code>// ceo.children is a HierarchicalDataSource, too
var middleManagement = ceo.children.view();
</code></pre>

<h4>The hasChildren property</h4>

<p>The <code>hasChildren</code> Boolean property indicates whether a data item contains children that can be fetched from the server. You can either hard-code it, map it to another property, or compute it with a function, as demonstrated below.</p>

<h6>Example</h6>

<pre><code>// hard-code that the item will always have children
hasChildren: true

// map the hasChildren property to the HasEmployees field, serialized from the server
hasChildren: "HasChildren"

// compute whether the given item will have children
hasChildren: function(item) {
    return item.HasEmployees &amp;&amp; item.RelatedDepartment;
}
</code></pre>

<h4>Bind HierarchicalDataSource to remote data with multiple service end-points</h4>

<p>The example below demonstrates how to create the HierarchicalDataSource component and bind it to remote data with multiple service end-points.</p>

<h6>Example</h6>

<pre><code>// configuration of the products service end-point
var Products = {
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/Products",
                dataType: "json"
            }
        },
        schema: {
            data: "products",
            model: {
                // products will never have children
                hasChildren: false
            }
        }
    };

// configuration of the categories service end-point
var Categories = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Categories",
            dataType: "json"
        }
    },
    schema: {
        data: "categories",
        model: {
            id: "categoryId",

            // categories will always have children
            hasChildren: true,

            // children will be fetched from the Products end-point
            children: Products
        }
    }
});
</code></pre>

<p>The configuration above creates a two-level HierarchicalDataSource—categories and products—that fetches data from two different end-points—<code>/service/Categories</code> and <code>/service/Products</code> respectively.</p>

<h2 id="widget-binding"><a href="#widget-binding">Widget Binding</a></h2>

<h3 id="bind-widgets-to-hierarchicaldatasource"><a href="#bind-widgets-to-hierarchicaldatasource">Bind Widgets to HierarchicalDataSource</a></h3>

<p>Currently, the Kendo UI widgets that are aware of the dataSource hierarchy are the TreeView and the PanelBar. However, since the HierarchicalDataSource component inherits from the DataSource component, you can share the root level of the hierarchy with any DataSource-enabled component.</p>

<h3 id="share-hierarchicaldatasource-between-widgets"><a href="#share-hierarchicaldatasource-between-widgets">Share HierarchicalDataSource between Widgets</a></h3>

<p>The example below demonstrates how to share the HierarchicalDataSource component between a Kendo UI TreeView and a Kendo UI Grid.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="treeview"&gt;&lt;/ul&gt;
&lt;div id="grid"&gt;&lt;/div&gt;

&lt;script&gt;
var Categories = new kendo.data.HierarchicalDataSource({
  type: "odata",
  transport: {
    read: {
      url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
    }
  },
  schema: {
    model: {
      id: "CategoryID",
      hasChildren: "Products",
      children: {
        type: "odata",
        transport: {
          read: {
            url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
          }
        },
        schema: {
          model: {
            id: "ProductID",
            hasChildren: false
          }
        }
      }
    }
  }
});

$("#treeview").kendoTreeView({
  dataSource: Categories,
  dataTextField: ["CategoryName", "ProductName"]
});

$("#grid").kendoGrid({
   dataSource: Categories,
   columns: [
     { field: "CategoryName", title: "Name" },
     { field: "Description" }
   ]
});
&lt;/script&gt;
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Articles on the Kendo UI DataSource and HierarchicalDataSource components:</p>

<ul>
<li><a href="/api/javascript/data/hierarchicaldatasource">HierarchicalDataSource JavaScript API Reference</a></li>
<li><a href="/framework/hierarchicaldatasource/custom-binding">Custom Binding of HierarchicalDataSource</a></li>
<li><a href="/framework/datasource/overview">DataSource Overview</a></li>
<li><a href="/api/javascript/data/datasource">DataSource JavaScript API Reference</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

